<template>
  <div class="home-page">
    <div class="header" style="display: flex;flex-direction: row;">
      <div style="width: 33%;">
        
      </div>
      <div style="width: 34%;">
        <img :src="imageType.ysej" style="height: 40px;">
      </div>
      <div style="width: 33%;display: flex;flex-direction: row-reverse;">
        <div style="display: flex;flex-direction: column;text-align: left;padding-right: 4px;color: #303133;">
        <div><img :src="imageType.normal" style="height: 10px;width: 10px;" />
        场景事中拦截比率&lt;=40%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </div>
        <div><img :src="imageType.warning" style="height: 10px;width: 10px;" />
          40%&lt;场景事中拦截比率&lt;=70% </div>
        <div><img :src="imageType.error" style="height: 10px;width: 10px;" />
          场景事中拦截比率&gt;70% &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
        </div>
      </div>
     
    </div>
    <div class="flow-wrap">
      <!--泳道-->
      <div class="step" style="height:230px;background-color: #F5F5F5;" >
        <div class="step-title-revnue"><img :src="imageType.yingshou" ><br>营收</div>
        <!--节点-->
        <div class="step-item" style="left:60px;top:90px;">需求提出</div>
        <div class="step-item" style="left:180px;top:90px;">需求承接</div>
        <div class="step-item" style="left:320px;top:90px;">需求整合</div>
        <div class="step-item-reven" style="left:460px;top:90px;">订单编制<br>/确认</div>
        <div class="step-item-reven" style="left:600px;top:90px;">订单修正<br>/交付</div>
        <div class="step-item" style="left:740px;top:90px;">订单起租</div>
        <div class="step-item" style="left:880px;top:90px;">订单出账</div>
        <!-- <div class="step-item" style="left:1020px;top:90px;">服务终止</div> -->
        <!-- <div class="step-item" style="left:460px;top:154px;">选址谈判</div> -->

        <!--超链接-->
        <div class="step-link tiaozhuan" style="left:420px;top:26px;" @click="$router.push({name:'biz-bfbo'})">
          <img class="imgico" :src="sceneImage['scene3.4']" />
          产品与资源一致性检查
        </div>
        <div class="step-link tiaozhuan" style="left:420px;top:46px;" @click="$router.push({name:'biz-bfbo'})">
          <img class="imgico" :src="sceneImage['scene3.4']" />
          非塔类订单绑定资源合规性校验
        </div>
        <div class="step-link tiaozhuan" style="left:420px;top:66px;" @click="$router.push({name:'biz-resource'})">
          <img class="imgico" :src="sceneImage['scene2.6']" />
          沉淀固化数据实时校验
        </div>


        <div class="step-link" style="left:720px;top:46px;" >
          <img class="imgico" :src="sceneImage['scene4.1']" />
          起租前同一订单关联站址状态和挂高等基础信息的一致性检查
        </div>
        <div class="step-link " style="left:720px;top:66px;" >
          <img class="imgico" :src="sceneImage['scene3.10']" @click="$router.push({name:'biz-itps'})"/>
          站址拆站发起实时提示
        </div>

        <div class="step-link tiaozhuan" style="left:360px;top:326px;" @click="$router.push({name:'biz-mrp'})">
          <img class="imgico" :src="imageType.normal" />
          物资参考价提示
        </div>

        <div class="step-link tiaozhuan" style="left:560px;top:276px;" @click="$router.push({name:'biz-emc'})">
          <img class="imgico" :src="imageType.normal" />
          工程物资一致性检查
        </div>

        <div class="step-link" style="left:560px;top:260px;" >
          <img class="imgico" :src="sceneImage['scene4.8']" />
          主设备退库合规性校验
        </div>
      
      
         <!--文本-->
        <div class="step-link step-line-text" style="left:141px;top:93px;font-size:12px;" >
          需求<br/>数据
        </div>
        <div class="step-link step-line-text" style="left:270px;top:93px;font-size:12px;" >
          需求<br/>数据
        </div>
        <div class="step-link step-line-text" style="left:396px;top:90px;font-size:12px;" >
          需求数据
        </div>
        <div class="step-link step-line-text" style="left:396px;top:110px;font-size:12px;" >
          站址数据
        </div>
        <div class="step-link step-line-text" style="left:540px;top:98px;font-size:12px;" >
          订单数据
        </div>
        <div class="step-link step-line-text" style="left:680px;top:98px;font-size:12px;" >
          订单数据
        </div>
         <div class="step-link step-line-text" style="left:820px;top:98px;font-size:12px;" >
          订单数据
        </div>
         <div class="step-link step-line-text" style="left:348px;top:288px;font-size:12px;z-index:100;" >
          站址数据
        </div> 
         <!-- <div class="step-link step-line-text" style="left:430px;top:448px;font-size:12px;" >
          物业信息
        </div> -->
        <div class="step-link step-line-text" style="left:860px;top:597px;font-size:12px;background-color: #fff;" >
          资产数据
        </div>  

        <div class="step-link step-line-text" style="left:320px;top:535px;font-size:12px;z-index:100;" >
          站址数据
        </div> 

        <div class="step-link step-line-text" style="left:470px;top:200px;font-size:12px;z-index:100;" >
          订单数据
        </div> 

        <div class="step-link step-line-text" style="left:720px;top:166px;font-size:12px;z-index: 100;" >
          资源数据
        </div>

        <div class="step-link step-line-text" style="left:420px;top:370px;font-size:12px;" >
          采购信息
        </div> 

        <div class="step-link step-line-text" style="left:500px;top:340px;font-size:12px;" >
          物料数据
        </div> 

        <div class="step-link step-line-text" style="left:536px;top:298px;font-size:12px;z-index:100;" >
          项目数据
        </div> 

        <div class="step-link step-line-text" style="left:676px;top:298px;font-size:12px;z-index:100;" >
          项目数据
        </div> 

        <div class="step-link step-line-text" style="left:816px;top:298px;font-size:12px;z-index:100;" >
          项目数据
        </div> 

        <div class="step-link step-line-text" style="left:748px;top:348px;font-size:12px;z-index:100;" >
          工程物理
        </div> 
        <div class="step-link step-line-text" style="left:748px;top:364px;font-size:12px;z-index:100;" >
          到货数据
        </div> 
         
        <!--线-->
        <div class="step-line" style="left:110px;top:106px;width:60px;"></div>
        <div class="step-line" style="left:252px;top:106px;width:60px;"></div>
        <div class="step-line" style="left:390px;top:106px;width:70px;"></div>
        <div class="step-line" style="left:532px;top:106px;width:60px;"></div>
        <div class="step-line" style="left:672px;top:106px;width:60px;"></div>
        <div class="step-line" style="left:812px;top:106px;width:60px;"></div>
        <!-- <div class="step-line verline" style="left:375px;top:118px;height:50px;"></div> -->
        <!-- <div class="step-line" style="left:375px;top:167px;width:80px;"></div> -->
        <div class="step-line verline" style="left:345px;top:116px;height:468px;z-index: 99;"></div>
        <div class="step-line verline" style="left:355px;top:126px;height:468px;z-index: 99;"></div>
        <!-- <div class="step-line verline" style="left:355px;top:126px;height:330px;"></div> -->
        <div class="step-line" style="left:452px;top:460px;width:138px;z-index: 99;"></div>
        <div class="step-line" style="left:476px;top:452px;width:128px;z-index: 99;"></div>

        <div class="step-line" style="left:496px;top:446px;width:100px;z-index: 99;"></div>

        <div class="step-line verline" style="left:476px;top:312px;height:140px;z-index: 99;"></div>

        <div class="step-line verline" style="left:496px;top:316px;height:130px;z-index: 99;"></div>

        <!-- <div class="step-line" style="left:810px;top:456px;width:66px;"></div> -->
        <div class="step-line" style="left:735px;top:604px;width:279px;"></div>
        <div class="step-line verline" style="left:495px;top:122px;height:160px;z-index: 99;"></div>
        <!-- <div class="step-line verline" style="left:495px;top:124px;height:30px;"></div> -->
        <div class="step-line " style="left:495px;top:304px;width:380px;z-index: 99;"></div>
        <div class="step-line verline" style="left:775px;top:304px;height:138px;z-index: 99;"></div>

        <div class="step-line verline" style="left:634px;top:314px;height:132px;z-index: 99;"></div>

        <div class="step-line verline" style="left:775px;top:120px;height:59px;z-index: 99;"></div>

        <div class="step-line " style="left:700px;top:178px;width:75px;z-index: 99;"></div>

        <div class="step-line verline" style="left:700px;top:178px;height:420px;z-index: 99;"></div>


         <div class="step-line " style="left:670px;top:456px;width:204px;z-index: 99;"></div>
        

        <!--箭头-->
        <div class="step-line-arrow to_right" style="left:170px;top:103px;"></div>
        <div class="step-line-arrow to_right" style="left:310px;top:103px;"></div>
        <div class="step-line-arrow to_right" style="left:452px;top:103px;"></div>
        <div class="step-line-arrow to_right" style="left:592px;top:103px;"></div>
        <div class="step-line-arrow to_right" style="left:732px;top:103px;"></div>
        <div class="step-line-arrow to_right" style="left:872px;top:103px;"></div>
        <!-- <div class="step-line-arrow to_right" style="left:453px;top:164px;"></div> -->
        <div class="step-line-arrow to_bottom" style="left:341px;top:582px;"></div>
        <!-- <div class="step-line-arrow to_top" style="left:342px;top:118px;"></div> -->
        <div class="step-line-arrow to_top" style="left:352px;top:118px;"></div>
        <div class="step-line-arrow to_right" style="left:583px;top:456px;z-index:1;"></div>

        <div class="step-line-arrow to_right" style="left:583px;top:442px;z-index:100;"></div>

        <div class="step-line-arrow to_right" style="left:872px;top:453px;z-index:1;"></div>
        <div class="step-line-arrow to_right" style="left:870px;top:453px;"></div>

        <div class="step-line-arrow to_right" style="left:1012px;top:600px;"></div>
        <div class="step-line-arrow to_bottom" style="left:492px;top:282px;"></div>
        
        <div class="step-line-arrow to_top" style="left:472px;top:316px;"></div>


        <div class="step-line-arrow to_right" style="left:593px;top:301px;"></div>
        <div class="step-line-arrow to_right" style="left:733px;top:301px;"></div>
        <div class="step-line-arrow to_right" style="left:873px;top:301px;"></div>



        <div class="step-line-arrow to_top" style="left:772px;top:316px;"></div>
        <div class="step-line-arrow to_top" style="left:630px;top:316px;"></div>

         <div class="step-line-arrow to_top" style="left:771px;top:118px;"></div>

         <div class="step-line-arrow to_right" style="left:734px;top:452px;z-index:1;"></div>
        

      </div>
      <div class="step">
        <div class="step-title-revnue" ><img :src="imageType.gc" ><br>工程</div>
        <div class="step-item" style="left:460px;top:60px;">立项设计</div>
        <div class="step-item" style="left:600px;top:60px;">实施</div>
        <div class="step-item" style="left:740px;top:60px;">内部验收</div>
        <div class="step-item" style="left:880px;top:60px;">完工交维</div>
      </div>
      <div class="step" style="background-color: #F5F5F5;">
        <div class="step-title-revnue" ><img :src="imageType.swhz" ><br>商务合作</div>
          <div class="step-item" style="left:370px;top:60px;">供应商认证</div>
          <div class="step-item" style="left:590px;top:60px;min-width: 85px;">采购</div>
          <div class="step-item" style="left:740px;top:60px;">到货确认</div>
          <div class="step-item" style="left:880px;top:60px;">商合结算</div>
      </div>
      <div class="step" style="height: 100px;">
        <div class="step-title-revnue" ><img :src="imageType.swhz" ><br>资源资产管理</div>

        <div class="step-item" style="left:320px;top:60px;">站址数据</div>
        <div class="step-item" style="left:665px;top:60px;">资源管理</div>
        <div class="step-item" style="left:1020px;top:60px;">资产管理</div>

        <!--线-->
      </div>
      <div>
  
      </div>
    </div>
  </div>
</template>

<style scoped>
  .home-page {
    position: relative;
    width: 100%;
    border-right: 1px solid #f4f4f4;
    background: #fff;
  }

  .home-page>.header {
    /* height: 60px;
    line-height: 60px; */
    font-size: 12px;
    /* background: #eaeaea; */
    border-bottom: 1px solid #c7c7c7;
    text-align: center;
    color: #EB4B4B;
    padding-top: 8px;
    padding-bottom: 8px;
    height: 62px;
  }
  .home-page>.header >img{
    height: 40px;
  }
  .home-page>.header>.header-title {
    line-height: 30px;
    display: flex;
    flex-direction: row;
    text-align: center;
    align-items: center;
  justify-content: center;
  margin-bottom: 0px !important;
  }
  
  .home-page>.header>.header-a {
    
    display: flex;
    flex-direction: column;
    text-align: right;
  }

  .home-page>.flow-wrap {
    overflow: auto;
  }

  .flow-wrap>.step {
    position: relative;
    width: 100%;
    min-width: 1120px;
    height: 150px;
    border-bottom: 1px dashed #bababa;
  }

  .step .step-title {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    font-size: 13px;
    text-align: center;
    font-weight: bold;
    line-height: 20px;
    background: #c7eaf6;
    padding: 60px 5px;
  }

 
  .step .step-title-revnue {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 60px;
    font-size: 13px;
    text-align: center;
    font-weight: bold;
    background: #F5F5F5;
    color: rgb(230, 99, 99);
    
    /* padding: 60px 5px; */
    display:table-cell; vertical-align:middle;

    display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;

  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;

  display: -o-box;
  -o-box-orient: horizontal;
  -o-box-pack: center;
  -o-box-align: center;

  display: -ms-box;
  -ms-box-orient: horizontal;
  -ms-box-pack: center;
  -ms-box-align: center;

  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
  }
  .step .step-title-revnue img{
    width: 38px;
    height: 38px;
  }

  .step-title.offset15 {
    padding-top: 50px;
  }

  .step-item {
     position: absolute;
    height: 28px;
    min-width: 70px;
    line-height: 28px;
    font-size: 12px;
    background: #f2c2c2;
    border: 1px solid #f2c2c2;
    color: #000;
    text-align: center;
    border-radius: 3px;
    padding: 0 10px;
    cursor: default;
    z-index: 100;
  }

 .step-item-reven {
  position: absolute;
    /* height: 28px; */
    width: 70px;
    font-size: 12px;
    background: #f2c2c2;
    border: 1px solid #f2c2c2;
    color: #000;
    text-align: center;
    border-radius: 3px;
    cursor: default;
    /* transform: scale(0.6); */
    white-space: pre-wrap;
  }

  .step-item:hover {
    background: #f2c2c2;
  }

  .step .flow-lendge {
    position: absolute;
    width: 600px;
  }

  .step .step-link {
    position: absolute;
    font-size: 12px;
    /* cursor: pointer; */
    z-index: 5;
  }

  .step .step-link:hover {
    color: #4390ea;
  }


  .step-link .imgico {
    width: 16px;
    height: 16px;
    margin-right: 0px;
    margin-top: -6px;
  }

  .flow-lendge>.lendge-item {
    float: left;
    margin-right: 15px;
    font-size: 12px;
    height: 24px;
    line-height: 24px;
  }

  .lendge-item .imgico {
    width: 16px;
    height: 16px;
    margin-right: 5px;
    margin-top: -4px;
  }

  .step-item.lgbtn {
    width: 200px;
    cursor: pointer;
  }

  .step-item.lgbtn:hover {
    background: #fff;
    color: #0053a7;
    font-weight: 550;
  }

  .step-line {
    position: absolute;
    height: 1px;
    border-bottom: 1px solid #666;
  }

  .step-line.verline {
    width: 1px;
    border-bottom: none;
    border-left: 1px solid #666;
  }

  .step-line-arrow {
    position: absolute
  }

  .step-line-arrow.to_top {
    width: 0;
    height: 0;
    border-bottom: 8px solid #666;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
  }

  .step-line-arrow.to_bottom {
    width: 0;
    height: 0;
    border-top: 8px solid #666;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
  }

  .step-line-arrow.to_left {
    width: 0;
    height: 0;
    border-right: 8px solid #666;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
  }

  .step-line-arrow.to_right {
    width: 0;
    height: 0;
    border-left: 8px solid #666;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
  }
  .step-line-text{
      background-color: #fff;
      font-size: 50%;
  }

  .tiaozhuan{
    
  }
  .tiaozhuan:hover{
    color:#eb4a4b !important;
    text-decoration:underline;
    font-weight:bold;
    cursor: pointer;
  }
</style>

<script>

  export default {
    data() {
      return {
        currentTime: '2020-12-01 00:00:00',
        icoType: 'normal',
        imageType:{
          normal:require("@/assets/img/normal.png"),
          error:require("@/assets/img/error.png"),
          warning:require("@/assets/img/warning.png"),
          ysej:require("@/assets/img/ysej.png"),
          yingshou:require("@/assets/img/yingshounew.png"),
          sjz:require("@/assets/img/sjz.png"),
          zfkt:require("@/assets/img/zfkt.png"),
          cb:require("@/assets/img/cb.png"),
          zc:require("@/assets/img/zc.png"),
          gc:require("@/assets/img/gc.png"),
          yjbt:require("@/assets/img/yjbt.png"),
          swhz:require("@/assets/img/swhz.png"),
        },
        sceneImage:{
           'scene1.5':require("@/assets/img/normal.png"),
           'scene2.2':require("@/assets/img/normal.png"),
           'scene2.3':require("@/assets/img/normal.png"),
           'scene2.6':require("@/assets/img/normal.png"),
           'scene2.8':require("@/assets/img/normal.png"),
           'scene2.9':require("@/assets/img/normal.png"),
           'scene2.10':require("@/assets/img/normal.png"),
           'scene2.11':require("@/assets/img/normal.png"),
           'scene2.12':require("@/assets/img/normal.png"),
           'scene2.13':require("@/assets/img/normal.png"),
           'scene2.14':require("@/assets/img/normal.png"),
           'scene2.15':require("@/assets/img/normal.png"),
           'scene2.16':require("@/assets/img/normal.png"),
           'scene2.17':require("@/assets/img/normal.png"),
           'scene2.18':require("@/assets/img/normal.png"),
           'scene2.21':require("@/assets/img/normal.png"),
           'scene2.22':require("@/assets/img/normal.png"),
           'scene2.23':require("@/assets/img/normal.png"),
           'scene2.25':require("@/assets/img/normal.png")
           ,
           'scene3.4':require("@/assets/img/normal.png"),
          //  'scene2.6':require("@/assets/img/normal.png"),
           'scene4.1':require("@/assets/img/normal.png"),
           'scene3.10':require("@/assets/img/normal.png"),
           'scene4.8':require("@/assets/img/normal.png")
        }
      }
    },
    created() {
      this.setCurrentTime()
      this.queryPageCount('*')

      console.log("当前用户:["+sessionStorage.getItem('userName')+"]");
    },
    computed: {
    },
    methods: {
      dateFormat(date) {
        const timeDate = new Date(date.getTime() + (8 * 3600 * 1000))
        const timeDateString = timeDate.toJSON()
        return timeDateString.replace('T', ' ').slice(0, 19)
      },
      setCurrentTime() {
        this.currentTime = this.dateFormat(new Date())
      },
      setSceneImage(scene,per){
          var key = 'scene'+scene;
          if(per > 0.4 && per <= 0.7){
             this.sceneImage[key]=this.imageType.warning;
          }else if(per > 0.7){
             this.sceneImage[key]=this.imageType.error;
          }else{
            this.sceneImage[key]=this.imageType.normal;
          }
      },
      async queryPageCount(scene) {
        try {
          const r = await this.$http({
            url: this.$http.adornBizUrl('/log/queryStatistics'),
            method: 'post',
            data: this.$http.adornData('param=' + JSON.stringify({scene:scene}), false),
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
          })
          //console.log(r.data.data);
          var self = this;
          if(r.data.data && r.data.data.length >0){
              var scenes = r.data.data;
              scenes.forEach((item,i)=>{
                  self.setSceneImage(item.scene,item.per);
              });
          }
        } catch (e) {
          console.log(e)
        } finally {
        }
      }
    }
  }
</script>
